<template>
  <el-dialog
    :title="props.operType === 'add' ? '新增版本' : '编辑版本'"
    v-model="visible"
    width="50%"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-form :model="form" :rules="rules" ref="versionRef" label-width="100px">
      <el-row>
        <el-col :span="16">
          <el-form-item label="系统文件" prop="url">
            <FileUploadByType v-model="form.url" :limit="1" :fileType="fileType" />
          </el-form-item>
        </el-col>
        <el-col :span="8"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="版本号" prop="versionNo">
            <el-input v-model="form.versionNo" placeholder="请输入" maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="8"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="系统名称" prop="versionName">
            <el-input v-model="form.versionName" placeholder="请输入" maxlength="30" />
          </el-form-item>
        </el-col>
        <el-col :span="8"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="内部版本号" prop="innerVersionNo">
            <el-input-number
              v-model="form.innerVersionNo"
              placeholder="请输入"
              :min="0"
              :max="99999"
              :precision="0"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="设备类型" prop="machineType">
            <el-select
              v-model="form.machineType"
              placeholder="请选择"
              filterable
              style="width: 100%"
            >
              <el-option
                v-for="dict in device_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8"> </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="loadingSubmit">
          {{ props.operType === 'add' ? '新增' : '编辑' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="AddVersion">
import { defineProps } from 'vue'
import { addVersion } from '@/api/advert'

const props = defineProps({
  operType: {
    type: String,
    default: 'add'
  }
})

const emit = defineEmits(['updateList'])
const { proxy } = getCurrentInstance()
const { device_type } = proxy.useDict('device_type')
const visible = ref(false)
const loadingSubmit = ref(false)
const versionRef = ref()
const fileType = ['apk']

const form = ref({
  url: null,
  versionNo: null,
  versionName: null,
  innerVersionNo: 0,
  machineType: null
})
const rules = {
  url: [{ required: true, message: '系统文件不能为空', trigger: 'blur' }],
  versionNo: [{ required: true, message: '版本号不能为空', trigger: 'change' }],
  versionName: [{ required: true, message: '系统名称不能为空', trigger: 'blur' }],
  innerVersionNo: [{ required: true, message: '内部版本号不能为空', trigger: 'blur' }],
  machineType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }]
}

//** form提交 */
function submitForm() {
  proxy.$refs['versionRef'].validate((valid) => {
    if (valid) {
      loadingSubmit.value = true
      let params = {
        ...form.value,
        url: form.value.url.length > 0 ? form.value.url[0].url : null,
        size: form.value.url.length > 0 ? form.value.url[0].size : null
      }
      addVersion(params).then(
        (res) => {
          proxy.$modal.msgSuccess('新增成功')
          emit('updateList')
          visible.value = false
        },
        (error) => {
          loadingSubmit.value = false
        }
      )
    }
  })
}

//** init */
const currentId = ref()
function show(type, id) {
  reset()
  visible.value = true
}

//** form重置 */
function reset() {
  form.value = {
    url: null,
    versionNo: null,
    versionName: null,
    innerVersionNo: 0,
    machineType: null
  }
  if (versionRef.value) {
    versionRef.value.resetFields()
  }
  loadingSubmit.value = false
}
defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.select-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .input-box {
    width: 80%;
  }
}
</style>
